<template>
    <div class="footer-menu">
        <ul>
            <li v-for="(item, k) in menus" :key="k">
                <a :href="`/${item.name}`">
                    <p>
                        <i :class="item.icon"></i>
                    </p>
                    <p class="name">{{ item.label }}</p>
                </a>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import router from '@/router/index'
const activeName = ref('')
router.onReady(() => {
    const currentRoute = router.currentRoute
    activeName.value = currentRoute.meta?.parent || currentRoute.name || 'home'
})
const menus = [
    {
        label: '首页',
        name: 'home',
        icon: 'el-icon-s-home',
    },
    {
        label: '电话',
        name: '',
        icon: 'el-icon-phone',
    },
    {
        label: 'QQ',
        name: '',
        icon: 'el-icon-chat-dot-round',
    },
    {
        label: '邮件',
        name: '',
        icon: 'el-icon-message',
    },
    {
        label: '地址',
        name: '',
        icon: 'el-icon-location-outline',
    },
]

// 菜单
// const dialogTableVisible = ref(false)
// function openMenu() {
//     dialogTableVisible.value = true
// }
</script>
<style scoped lang="scss">
.footer-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 46px;
    border-top: 2px solid #f39801;
    z-index: 99;
    background-color: #ffffff;

    ul {
        display: flex;
    }
    li {
        text-align: center;
        list-style: none;
        width: 25%;
        .name {
            font-size: 12px;
            color: #9c9c9c;
        }
        i {
            font-size: 22px;
            color: #9c9c9c;
        }
    }
}

@media screen and (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-menu {
        display: none;
        float: none;
        width: 100%;
        position: absolute;
        top: 80px;
        left: 0;
        background: #fff;
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        display: block;
    }

    .nav-menu li {
        float: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .nav-menu a {
        line-height: 50px;
        padding: 0 15px;
    }
}

/* Fallback for IE9 flex support */
.ie9 .nav-container {
    text-align: justify;
}

.ie9 .nav-container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
</style>
